<template>
    <div>
        <banner 
            :sightName='sightName'
            :gallaryImgs="gallaryImgs"
            :bannerImg='bannerImg'
        ></banner>
        <dheader></dheader>
        <div class="content">
            <dlist :list='list'></dlist>
        </div>
    </div>
</template>
<script>
import banner from './componets/banner'
import dheader from './componets/header'
import dlist from './componets/list'
import axios from 'axios'
export default {
    name:'Detail',
    mounted() {
        this.getDetaiInfo()
    },
    methods: {
        getDetaiInfo(){
            axios.get('/api/detail.json',{
                params:{
                    id:this.$route.params.id
                }
            }).then(this.getDetaiInfoSucc)
        },
        getDetaiInfoSucc(res){
            res=res.data
            if(res.ret&&res.data){
                const data=res.data
                this.sightName=data.sightName
                this.bannerImg=data.bannerImg
                this.gallaryImgs=data.gallaryImgs
                this.list=data.categoryList
            }
        }
    },
    components:{
        banner,dheader,dlist
    },data() {
        return {
            sightName:'',
            bannerImg:'',
            gallaryImgs:[],
            list:[],
        }
    },
}
</script>
<style lang="stylus" scoped>
    .content
        height :50rem
</style>